<template>
	<view class="searchPage" @touchstart="start" @touchend="end">
		<headerinfo></headerinfo>
		<u-navbar title="家庭日历" :placeholder="true" leftIconColor="#fff" :autoBack="true" :bgColor="bgColor"
			:titleStyle="titleStyle"></u-navbar>
		<view class="riliBox">
			<view class="title">
				<i class="iconfont" style="transform: rotate(180deg);" @click="shang" >&#xe613;</i>
				<span class="today">{{monthDate}}</span>
				<i class="iconfont" @click="xia">&#xe613;</i>
				<!-- <span  class="btn" >下月</span> -->
			</view>
			<view class="desc" v-if="list.length == 0">
				您还未添加家庭事件，赶快给您的家庭
				创建家庭事件
			</view>
			<view class="listBox" v-for="(item,index) in list" :key="index" >
				<view class="list" v-for="(item2,index2) in item.data" @click="toInfo(item2)" :key="index2">
					<view class="pink">
						{{username == item2.username?'我的':item2.username}}
					</view>
					<view class="label">
						{{item2.title}}
					</view>
					<view class="date" style="margin-top: 20rpx;" v-if="item2.remark">
						{{item2.remark}}
					</view>
					<view class="date">
						{{item2.dateWithStartTime}}
					</view>
					<view class="day" v-html="getDistanceSpecifiedTime(item2.dateWithStartTime)">
					</view>
				</view>
			</view>
			<image class="riliImg" v-if="list.length ==0"  src='../../static/images/noData.png' mode="widthFix"></image>
		</view>

		<view class="" style="height: 14vh;"></view>
		<view class="bottomBtns">
			<view class="btn" @click="toPage('/pages/calendar/add')">
				创建家庭事件
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		components: {},
		data() {
			return {
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				today:'',
				monthDate: '',
				list: [],
				username: uni.getStorageSync('username') ? uni.getStorageSync('username') : '',
				startData:{
					clientX:"",
					clientY:"",
				}
			};
		},

		onShow() {
			
			this.monthDate = dayjs().format('YYYY-MM')
			this.getData()
		},
		methods: {
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
			},
			
			end(e) {
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				const subY = e.changedTouches[0].clientY - this.startData.clientY;
				if (subY > 50 || subY < -50) {
					console.log('上下滑')
				} else {
					if (subX > 50) {
						// uni.navigateBack()
						console.log('右滑')
						this.xia()
					} else if (subX < -50) {
						this.shang()
			console.log('左滑')
			// 			let videoUseName = this.list[this.current].userRsp.username
			
			// 			uni.navigateTo({
			// 				url: `/pages/tabbar/mine/othermine?username=${videoUseName}`
			// 			})
					} else {
						console.log('无效')
					}
				}
			},
			shang(){
				this.monthDate= dayjs(this.monthDate).add(-1, 'month').startOf('month').format('YYYY-MM')
				console.log(this.monthDate)
				this.getData()
			},
			xia(){
				this.monthDate= dayjs(this.monthDate).add(1, 'month').startOf('month').format('YYYY-MM')
				console.log(this.monthDate)
				this.getData()
			},
			toInfo(item){
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/calendar/add?data=${data}`
				})
			},
			getDistanceSpecifiedTime(dateTime) {
				// 指定日期和时间
				var EndTime = new Date(dateTime);
				// 当前系统时间
				var NowTime = new Date();
				var t = EndTime.getTime() - NowTime.getTime();
				var d = Math.floor(t / 1000 / 60 / 60 / 24);
				var h = Math.floor(t / 1000 / 60 / 60 % 24);
				if(d<0){
					return (365+d)+'<span style="font-size:12px"> 天后</span>'
				}else if(d == 0){
					return h+'<span style="font-size:12px"> 时后</span>'
				}else{
					return d+'<span style="font-size:12px"> 天</span> '+ h+'<span style="font-size:12px;"> 时后</span>'
				}
			},
			getData() {
				let data = {
					monthDate: this.monthDate
				}
				this.$api.getCalendarEventsByDate(data).then(res => {

					let listArr = []
					if (res) {
						for (let i in res) {
							listArr.push({
								date: i,
								data: res[i]
							});
						}
					}
					this.list = listArr


				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	.searchPage {
		background-color: #f9f9f9;

		.bottomBtns {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 13vh;
			background-color: #fff;
			padding: 20rpx 30rpx 20rpx 30rpx;
			z-index: 1000;

			.btn {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #de4849;
				border-radius: 50px;
				color: #fff;
				font-size: 30rpx;
			}
		}

		.riliBox {
			width: 93%;
			border-radius: 10rpx;
			margin: 20rpx auto;
			background-color: #fff;
			box-shadow: 0 0 6px #f1f1f1;
			position: relative;
			padding: 50rpx 0;

			.title {
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.today{
				margin: 0 40rpx;
			}
			.btn{
				font-size: 24rpx;
				font-weight: 400;
				background-color: #de4849;
				border-radius: 10rpx;
				padding:10rpx 30rpx;
				color: #fff;
			}

			.desc {
				font-size: 28rpx;
				text-align: center;
				display: block;
				width: 500rpx;
				margin: 0 auto;
				color: #b7b7b7;
			}

			.riliImg {
				width: 400rpx;
				margin: 50rpx auto;
				height: auto;
				display: block;
			}

			.listBox {
				.list {
					width: 95%;
					background-color: #f1f1f1;
					margin: 0 auto;
					margin-top: 40rpx;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 20rpx 30rpx;
					position: relative;
					padding-right: 200rpx;

					.label {
						font-weight: bold;
					}

					.day {
						position: absolute;
						right: 30rpx;
						top: 50%;
						transform: translateY(-50%);
						font-size: 52rpx;

						span {
							font-size: 26rpx;
						}
					}

					.pink {
						position: absolute;
						right: 20rpx;
						top: -25rpx;
						font-size: 23rpx;
						background-color: #ff8800;
						padding: 8rpx 15rpx;
						color: #fff;
						border-radius: 10rpx;
					}

					.date {
						font-size: 24rpx;
						color: #484848;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>